<template>
    <div class="Index">
        <header>
            <h1 class="FontSize_Title">欢迎来到自定义摸鱼网站</h1>
            <h4 class="">自定义摸鱼的无聊修仙模拟器
                <!-- 详情 -->
                <sup @click="HtmlDetails">!</sup>
            </h4>
        </header>

        <main class="Content One">
            <!-- 用户信息 -->
            <div class="marginBottom2">
                <div v-if="!Flag" class="FontSize_text">
                    您还没有登录，请登录之后体验游戏
                </div>
                <div v-if="Flag" style="text-align: center;">
                    <div class="DefaultImg marginBottom1 GameImg" @click="UplaodFile">
                        <img :src="information.userIcon" alt="头像" loading="lazy">
                        <input type="file" style="display:none" id="file" ref="file">
                    </div>
                    <div class="FontSize_text marginBottom1">
                        <span style="margin-right: 20px;" class="marginBottom1 DisplayBlock_X ">昵 称：{{
                            information.userName }}</span>
                        <span calss="marginBottom1 DisplayBlock_X">账 号：{{ information.userId }}</span>
                    </div>
                    <div class="FontSize_text marginBottom1">
                        <span>注册时长：{{ information.userTime }}</span>
                    </div>
                </div>
            </div>
            <!-- 按钮 -->
            <div class="ButBox">
                <button class="FontSize_word" v-if="!Flag" @click="loginUp">
                    登录
                </button>
            </div>
            <div class="ButBox" v-if="!Flag" @click="Register">
                <button class="FontSize_word">
                    注册
                </button>
            </div>
            <div class="ButBox" v-if="Flag">
                <button class="FontSize_word" @click="Settting">
                    设置
                </button>
            </div>
            <div class="ButBox">
                <button class="FontSize_word" @click="SetttingMusic" :key="Main.MP3">
                    音乐：{{ GetMusic() ? GetMusic().split("-")[0] == "play" ? '开' : "关" : "系统错误" }}
                </button>
            </div>
            <div class="ButBox" v-if="Flag">
                <button class="FontSize_word" :disabled="DisableFlag" @click="ContinueGame">
                    继续游戏
                </button>
            </div>
            <div class="ButBox" v-if="Flag">
                <button class="FontSize_word" @click="StartGame">
                    开始游戏
                </button>
            </div>
        </main>
        <div style="width:60%;margin:0 auto;">
            <p>游戏说明</p>
            <ul class="FontSize_text">
                <li>点击开始游戏会覆盖已创建游戏</li>
                <li>每次内测更新都将会删除游戏角色</li>
                <li>每次升级境界攻击都会进行累加</li>
            </ul>
        </div>
        <!-- 封装的弹窗 -->
        <!-- 注册 -->
        <Zky_Popup v-model:hidden="RegisterpHidden" :title="'注册'" :Confirm="RegisterConfirm"
            :overflowhidden="!Main.MozillaText">
            <div class="LoginUp">
                <label for="TitleType">昵 称：</label><input type="text" placeholder="请输入昵称" id="TitleType"
                    v-model="list.userName">
            </div>
            <div class="LoginUp">
                <label for="TitleType">密 码：</label><input type="password" placeholder="请输入密码" v-model="list.password">
            </div>
        </Zky_Popup>

        <!-- 登录 -->
        <Zky_Popup v-model:hidden="loginUpHidden" :title="'登录'" :Confirm="LoginConfirm" :overflowhidden="!Main.MozillaText">
            <div class="LoginUp">
                <label for="TitleType">昵称/账户：</label><input type="text" placeholder="请输入账户" id="TitleType"
                    v-model="list.userId">
            </div>
            <div class="LoginUp">
                <label for="TitleType">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</label><input type="password"
                    placeholder="请输入密码" v-model="list.password">
            </div>
        </Zky_Popup>
        <!-- 游戏开始说明弹窗 -->
        <Zky_Popup v-model:hidden="GameDateils" :titleHidden="false" :CancelHidden="true" :ConfirmTitle="'跳过'"
            :Confirm="GameConfirm" :Cancel="GameCancel" :overflowhidden="!Main.MozillaText">
            <div class="FontSize_word GameDateilsHidden">{{ MainGameTile }}</div>
        </Zky_Popup>
        <!-- 网站详情弹窗 -->
        <Zky_Popup v-model:hidden="HtmlDateils" :title="'更新日志'" :CancelHidden="false" :Confirm="ConfirmDateils">
            <div class="" v-for="item in Renewal" style="border-bottom: 1px dotted #fff;">
                <h3 style="text-align: center;">
                    {{ item.Title }} <sup>{{ item.edition }}版</sup>
                </h3>
                <p>更新日期：{{ item.time }}</p>
                <!-- <p>更新说明：更新将与更新日期当晚九点开始更新</p> -->
                <!-- <p>{{ item.word }}</p> -->
                <ul>
                    <li v-for="item1 in item.content">
                        {{ item1 }}
                    </li>
                </ul>
            </div>
        </Zky_Popup>
        <Zky_Loading v-model:hidden="Loging"></Zky_Loading>
        <!-- 设置弹窗 -->
        <Zky_Popup v-model:hidden="SettingDateils" :title="'设置管理'" :overflowhidden="!Main.MozillaText"
            :ConfirmlHidden="false">
            <div class="SettingBox">
                <p class="FontSize_Title" @click="UpdatePassword">修改密码</p>
                <p class="FontSize_Title" @click="Quit">退出账户</p>
                <p class="FontSize_Title" @click="Quit1">全屏设置:{{ Main.Screen == 1 ? "开" : "关" }}</p>
            </div>
        </Zky_Popup>
        <!-- 修改密码 -->
        <Zky_Popup v-model:hidden="UpdatePasswordPopup" :title="'修改密码'" :Confirm="UpdatePasswordConfirm"
            :overflowhidden="true">
            <div class="LoginUp">
                <label for="TitleType">新 密 码：</label><input type="password" placeholder="请输入新密码" v-model="PasswordText">
            </div>
        </Zky_Popup>
        <Zky_Popup v-model:hidden="QuitGame" :title="'退出账户'" :Confirm="QuitGameConfirm" :overflowhidden="true">
            <div>
                退出之后，将保留游戏数据，并返回到游戏主页
            </div>
        </Zky_Popup>
    </div>
</template>

<script setup>
// import mp3 from "../assets/BackgroundMusic.mp3"
import Alert from "../components/Com/Alert/index"
import Axios from "../Axios/index"
import { GetToken, SetToken, ClearToken, GetMusic, SetMusic } from "../utils/Token"
import { Time } from "../utils/Time"
import { ref, nextTick, onMounted } from "vue"
import { useRouter } from "vue-router"
import { main } from "../store"
const Main = main()
const router = useRouter()
const HtmlDateils = ref(false) // 控制更新弹窗是否显示
const GameDateils = ref(false) // 控制游戏弹窗是否显示
const loginUpHidden = ref(false) // 控制登录弹窗是否显示
const RegisterpHidden = ref(false) // 控制注册弹窗是否显示
const Flag = ref(false) // 判断当前是否登录 
const Loging = ref(false)  // 控制进度条
const timerTile = ref(null) // 控制进入游戏的计时器
const GameTile = ref("回首望，人生不过短短数百载，存有多少遗憾和失望，忘记烦恼，欢迎来到修仙的模拟世界。")// 游戏文本介绍
const MainGameTile = ref("")// 游戏文本介绍
const DisableFlag = ref(true) // 控制继续游戏按钮是否可以被点击
const SettingDateils = ref(false) // 控制设置弹窗显示与隐藏
const UpdatePasswordPopup = ref(false) // 控制修改密码弹窗显示
const PasswordText = ref("")  //修改密码弹窗文本
const QuitGame = ref(false) // 控制退出游戏弹窗显示
const file = ref() // 文件上传dom
const list = ref({// 注册/登录信息
    userName: "", // 用户名
    password: "",  // 密码
    userId: ""  // 用户id
})
// 模拟更新数组
const Renewal = ref([
    // 增加了抽奖功能
    {
        Title: "第二十六次更新", // 更新次数
        time: "2023/10/27", // 更新时间
        edition: "0.2.6",  // 更新版本
        word: "完善温馨的小屋模块。第三次更新到此结束，欢迎期待第四次更新"//更新内容
    },
    {
        Title: "第二十五次更新", // 更新次数
        time: "2023/10/26", // 更新时间
        edition: "0.2.5",  // 更新版本
        word: "完善温馨的小屋模块。修复了求生大师无法突破的报错。修复了无法获取随机事件奖励问题。增加了摧毁物品时有一个弹错提示。"//更新内容
    },
    {
        Title: "第二十四次更新", // 更新次数
        time: "2023/10/25", // 更新时间
        edition: "0.2.4",  // 更新版本
        word: "完善温馨的小屋模块。修改已经生成的地图数据，在地图模块增加可采集的资源。"//更新内容
    },
    {
        Title: "第二十三次更新", // 更新次数
        time: "2023/10/24", // 更新时间
        edition: "0.2.3",  // 更新版本
        word: "完善温馨的小屋模块。更新新设置兑换码，可以在游戏中的设置页面输入兑换码领取奖励，每个兑换码一个账户只能兑换一次，无法在多次游戏中兑换。取消了window浏览器的F11全屏设置"//更新内容
    },
    {
        Title: "第二十二次更新", // 更新次数
        time: "2023/10/20", // 更新时间
        edition: "0.2.2",  // 更新版本
        word: "完善温馨的小屋模块。修正在背包页面使用物品但物品数量不更新问题"//更新内容
    },
    {
        Title: "第二十一次更新", // 更新次数
        time: "2023/10/19", // 更新时间
        edition: "0.2.1",  // 更新版本
        word: "新增消耗物品若干、工具类物品若干。新增人物饱食度，探索（探索地图、打开宝箱都将消耗饱食度）、温馨的小屋（打捞物资升级物品都将消耗饱食度）。修复商店不刷新问题。完善温馨的小屋模块"//更新内容
    },
    {
        Title: "第二十次更新", // 更新次数
        time: "2023/10/18", // 更新时间
        edition: "0.1.10",  // 更新版本
        word: "新增温馨的小屋功能(完整功能将于日后逐次更新)，实力达到筑基期解锁该模式。新增丹药水溶丹（表面如海水一样碧蓝，入口即化。提升修为50/100/200）到达筑基后方可炼制，可用于任何境界提升修为、新增物品求生笔记（用于解锁求生大师职业）、新增物品探索手册，分别增加求生大师50/100/160。新增职业求生大师，野外探索、开启宝箱都会提升经验,求生有额外加成。修复了部分一只bug。新增设置全局窗口"//更新内容
    },
    {
        Title: "第十九次更新", // 更新次数
        time: "2023/10/17", // 更新时间
        edition: "0.1.9",  // 更新版本
        word: "更新地图喜神村剧情、探索和npc事件。更新地图物品红塑镇地图和兔绒村地图。将原有的npc熟练度最大值10000让调整为8400。优化网站进入慢的问题。优化更新内容的显示。新增炼丹师每次升级都需要消耗对应数量的炼丹要记。第三次大更新将开放新模式求生模块敬请期待"//更新内容
    },
    {
        Title: "第十八次更新", // 更新次数
        time: "2023/10/16", // 更新时间
        edition: "0.1.8",  // 更新版本
        word: "更新npc奖励,提升npc好感度可以获得奖励。开放地图喜神村(暂不开放剧情事件、探索事件以及npc)"//更新内容
    },
    {
        Title: "第十七次更新", // 更新次数
        time: "2023/10/13", // 更新时间
        edition: "0.1.7",  // 更新版本
        word: "完善了地图功能，开放明月村地图剧情模块。完善七日签到功能"//更新内容
    },
    {
        Title: "第十六次更新", // 更新次数
        time: "2023/10/11", // 更新时间
        edition: "0.1.6",  // 更新版本
        word: "新增物品万能钥匙（用于打开宝箱、门锁）。新增物品村庄地图，通过地图可以解锁其他区域，村庄地图只能在探索开放村庄中获得"//更新内容
    },
    {
        Title: "第十五次更新", // 更新次数
        time: "2023/10/10", // 更新时间
        edition: "0.1.5",  // 更新版本
        word: "开启地图模块（完整地图游玩方式将陆续开放）。开放地图明月村"//更新内容
    },
    {
        Title: "第十四次更新", // 更新次数
        time: "2023/10/09", // 更新时间
        edition: "0.1.4",  // 更新版本
        word: "新增网站图标。修复了随机事件奖励错误的情况。开启新功能七日签到。新增物品流梳(增加人物好感度10),广绣服(增加人物好感度40),凤求凰(增加人物好感度100)。新增npc角色,提升npc好感有意想不到的好处和任务哦"//更新内容
    },
    {
        Title: "第十三次更新", // 更新次数
        time: "2023/10/8", // 更新时间
        edition: "0.1.3",  // 更新版本
        word: "修复了背包、农田、商店、游戏说明、物品图鉴等部分ui显示。解决了炼丹时点击停止按钮产生的错误的文字描述。修复了商店不自动刷新、出售商品时出售价格为Nan等问题并优化了出售商品批量出售的操作。优化了停止种植农田而导致的数据错误。更新了登录设置，登录将采用昵称加密码的方式进行登录，注册时昵称唯一"//更新内容
    },
    {
        Title: "第十二次更新", // 更新次数
        time: "2023/10/07", // 更新时间
        edition: "0.1.2",  // 更新版本
        word: "优化文字显示。修复了突破失败时增加突破概率文本描述错误的情况。修复了当炼丹师职业被激活，而背包中没有炼丹要记就打开使用书籍弹窗的问题。将原有的背包、商店等功能从原来的点击人物名称进入改为通过功能模块进入。开启事件功能，事件功能分为随机事件（可重复触发）、剧情事件（达到一定要求触发，且只能触发一次）、探索事件（探索指定地图触发对应事件），探索事件和随机事件有好有坏，全凭运气(增加16条事件)"//更新内容
    },
    {
        Title: "第十一次更新", // 更新次数
        time: "2023/9/28", // 更新时间
        edition: "0.1.1",  // 更新版本
        word: "修复了由于刷新商店而产生的随机错误。开放炼丹功能，可以增加炼丹师经验。优化进入第一次进入页面（刷新页面）显示弹窗。游戏第一次大更新就此结束，欢迎期待后续功能"//更新内容
    },
    {
        Title: "第十次更新", // 更新次数
        time: "2023/9/27", // 更新时间
        edition: "0.1.0",  // 更新版本
        word: "开放商店出售功能。优化不同品质物品显示颜色不同。新增物品物品图鉴搜索功能。修复了第二次购买物品导致物品数量不对等问题。开放炼丹师职业并优化了部分物品文字描述错别字"//更新内容
    },
    {
        Title: "第十次更新", // 更新次数
        time: "2023/9/26", // 更新时间
        edition: "0.0.9",  // 更新版本
        word: "开放购买农田、种田、收获功能。修复了商店购买物品会减少其他物品数量的bug。优化经验池显示"//更新内容
    },
    {
        Title: "第九次更新", //更新次数
        time: "2023/9/25", //更新时间
        edition: "0.0.8",  // 更新版本
        word: "优化游戏主页-游戏设置-物品图鉴显示问题。重构所有已增加物品并新增书级物品，种子物品。新增商店功能,并上架商品，可以购买不可以出售。每日十分钟刷新商店"//更新内容
    },
    {
        Title: "第八次更新", //更新次数
        time: "2023/9/23", //更新时间
        edition: "0.0.7",  // 更新版本
        word: "新增设置（退出功能）。开启职业功能，新增职业炼丹师,可在游戏页面的游戏说明-职业详情中查询。开启种地系统，新增9块无法耕种的土地。开启财务系统,新增灵石（货币）"//更新内容
    },
    {
        Title: "第七次更新", //更新次数
        time: "2023/9/22", //更新时间
        edition: "0.0.6",  // 更新版本
        word: "开启天赋功能，随着天赋的好坏突破境界的概率也随之不一样，每次开局天赋随机生成。新增丹药物品可在图鉴中搜索物品。优化浏览器一开始就进入游戏主页的显示问题。优化进入游戏时的弹窗显示"//更新内容
    },
    {
        Title: "第六次更新", //更新次数
        time: "2023/9/21", //更新时间
        edition: "0.0.5",  // 更新版本
        word: "开放背包系统、物品查询机制。重构游戏游戏主页游戏说明模块样式(不会更新物品因此物品查询系统只是摆设)"//更新内容
    },
    {
        Title: "第五次更新", //更新次数
        time: "2023/9/20", //更新时间
        edition: "0.0.4",  // 更新版本
        word: "新增修改密码功能、自主修改头像功能。优化经验池显示、优化部分移动端显示"//更新内容
    },
    {
        Title: "第四次更新", //更新次数
        time: "2023/9/19", //更新时间
        edition: "0.0.3",  // 更新版本
        word: "开放经验池使用、增加背景音乐功能并正式上线测试版"//更新内容
    },
    {
        Title: "第三次更新", //更新次数
        time: "2023/9/16", //更新时间
        edition: "0.0.2",  // 更新版本
        word: "开放修炼功能并增加经验池"//更新内容
    },
    {
        Title: "第二次更新", //更新次数
        time: "2023/9/15", //更新时间
        edition: "0.0.1",  // 更新版本
        word: "开放修仙等级"//更新内容
    },
    {
        Title: "第一次更新", //更新次数
        time: "2023/9/14", //更新时间
        edition: "0.0.0",  // 更新版本
        word: "本游戏正在初步编写中，正在完善"//更新内容
    }
])
// 用户信息
const information = ref({
    userName: "", // 用户名
    password: "",  // 密码
    userId: "",  // 用户id
    userIcon: "",  // 用户图片
    userTime: ""  // 用户注册时间
})
onMounted(() => {
    Main.timerExpTime = 60
    Main.ExpTimer ? clearInterval(Main.ExpTimer) : ""
    ConfirmDateils()
    Token()
    if (GetToken()) {
        GameUserInformation()
        CharacterInformation()
    }


    Renewal.value.forEach(el => {
        el.content = el.word.split("。")
    })
})
// 控制全屏模式的缩放和开启
const Quit1 = () => {
    Main.Screen == 1 ? Main.Screen = 2 : Main.Screen = 1
}

// 退出游戏确认按钮
const QuitGameConfirm = () => {
    ClearToken()
    router.push({
        name: "/quit"
    })
}
// 点击退出账户
const Quit = () => {
    QuitGame.value = true
}
// 点击修改密码确认按钮
const UpdatePasswordConfirm = async () => {
    let pattren1 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$/
    if (!pattren1.test(PasswordText.value)) {
        Alert({
            title: "必须包含大小写字母和数字的组合，不能使用特殊字符",   // 渲染的内容，
            type: "error"  //组件类型
        })
        return
    }
    const res = await Axios("/Game/UpdatePassword", "POST", { password: PasswordText.value })
    if (res.code == 200) {
        ClearToken()
        router.push({
            name: "/quit"
        })
    } else {
        Alert({
            title: "修改失败",   // 渲染的内容，
            type: "error"  //组件类型
        })
    }
}
// 点击修改密码
const UpdatePassword = () => {
    UpdatePasswordPopup.value = true
}
// 上传图片
const UplaodFile = () => {
    // file
    file.value.click()
    file.value.onchange = async function (e) {

        const res = await Axios("/Upload", "PUT", { file: e.target.files[0] })
        if (res.code == 200) {
            const res1 = await Axios("/Game/userIcon", "POST", { userIcon: res.data[0] })
            if (res1.code == 200) {
                nextTick(() => {
                    information.value.userIcon = ""
                })
                GameUserInformation()
            } else {
                Alert({
                    time: 1000, // 每个组件小时时间 默认值1s
                    title: "上传图片失败",   // 渲染的内容，
                    type: "error"  //组件类型
                })
            }
        } else {
            Alert({
                time: 1000, // 每个组件小时时间 默认值1s
                title: "上传图片失败",   // 渲染的内容，
                type: "error"  //组件类型
            })
        }
    }


}

// 设置背景音乐
const SetttingMusic = () => {
    let str = GetMusic()

    let arr = str.split("-")
    arr[0] == "play" ? arr[0] = "close" : arr[0] = "play"
    str = ""

    arr.forEach((el, index) => {
        str += arr.length - 1 == index ? el : el + "-"
    })

    SetMusic(str)
    Main.MP3 = !Main.MP3
}
// 点击游戏设置按钮
const Settting = () => {
    SettingDateils.value = true
}

// 开始游戏说明弹窗取消事件
const GameCancel = () => {
    clearInterval(timerTile.value)

    GameDateils.value = false
}

// 点击继续游戏
const ContinueGame = async () => {
    router.push({
        name: "GameIndex"
    })
}

// 点击跳过按钮
const GameConfirm = async () => {
    clearInterval(timerTile.value)
    Loging.value = true
    const res = await Main.DelectCHARACTERS()
    if (res) {
        Alert({
            time: 1000, // 每个组件小时时间 默认值1s
            title: "创建角色成功",   // 渲染的内容，
            type: "success"  //组件类型
        })
        router.push({
            name: "GameIndex"
        })
        GameDateils.value = false
        Loging.value = false

    } else {
        Alert({
            time: 1000, // 每个组件小时时间 默认值1s
            title: "创建角色失败",   // 渲染的内容，
            type: "error"  //组件类型
        })
        GameDateils.value = false
        Loging.value = false
    }
}

// 判断用户是否存在副本信息
const CharacterInformation = async () => {
    const res = await Axios("/Game/CharacterInformation", "POST")
    DisableFlag.value = res.data
}
// 判单当前是否登录
const Token = () => {
    if (GetToken()) {
        Flag.value = true
    } else {
        Flag.value = false
    }
}

// 登录成功按钮
const LoginConfirm = async () => {
    if (list.value.userId == "") {
        Alert({
            time: 1000, // 每个组件小时时间 默认值1s
            title: "请输入账号在进行登录",   // 渲染的内容，
            type: "error"  //组件类型
        })
        return
    }
    // 校验密码 必须包含大小写字母和数字的组合，不能使用特殊字符

    if (list.value.password == "") {
        Alert({
            title: "请输入密码在进行登录",   // 渲染的内容，
            type: "error"  //组件类型
        })
        return
    }
    const res = await Axios("/IndexLogin", "POST", list.value)
    if (res.code == 200) {
        console.log(123);
        loginUpHidden.value = false
        list.value = {// 注册/登录信息
            userName: "", // 用户名
            password: "",  // 密码
            userId: ""
        }
        Alert({
            title: "登录成功",   // 渲染的内容，
            type: "success"  //组件类型
        })
        SetToken(res.data)
        Token()
        await GameUserInformation()
        CharacterInformation()
    } else {
        Alert({
            title: "登录失败",   // 渲染的内容，
            type: "error"  //组件类型
        })
    }
}
// 初始化用户信息 
const GameUserInformation = async () => {
    const res = await Axios("/Game/Information", "POST")
    if (res.code == 401) {
        ClearToken()
        Token()
        true
    } else if (res.code == 201) {
        Alert({
            time: 2000, // 每个组件小时时间 默认值1s
            title: res.message,   // 渲染的内容，
            type: "error"  //组件类型
        })
        return
    }
    information.value = JSON.parse(JSON.stringify(res.data))
    information.value.userIcon ? '' : information.value.userIcon = "https://z1.ax1x.com/2023/09/15/pPWMpCD.jpg"
    information.value.userTime ? information.value.userTime = Time(new Date(information.value.userTime)) : ""
}

// 注册同意按钮
const RegisterConfirm = async () => {
    // 校验用户 只允许使用中文，且不超过8个字
    let pattren = /^[\u4e00-\u9fa5]{2,8}$/
    if (!pattren.test(list.value.userName)) {
        Alert({
            time: 1000, // 每个组件小时时间 默认值1s
            title: "昵称只允许使用中文，且不超过8个字",   // 渲染的内容，
            type: "error"  //组件类型
        })
        return
    }
    // 校验密码 必须包含大小写字母和数字的组合，不能使用特殊字符
    let pattren1 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,10}$/
    if (!pattren1.test(list.value.password)) {
        Alert({
            title: "必须且包含大小写字母和数字，长度在8到10位",   // 渲染的内容，
            type: "error"  //组件类型
        })
        return
    }
    const res = await Axios("/IndexRegister", "POST", list.value)
    if (res.code == 200) {
        RegisterpHidden.value = false
        list.value = {// 注册/登录信息
            userName: "", // 用户名
            password: "",  // 密码
            userId: ""
        }
        Alert({
            title: "注册成功",   // 渲染的内容，
            type: "success"  //组件类型
        })
        // SetId(res.data)
    } else {
        Alert({
            title: res.message,   // 渲染的内容，
            type: "error"  //组件类型
        })
    }
}
// 点击注册
const Register = () => {
    RegisterpHidden.value = true
    list.value = {// 注册/登录信息
        userName: "", // 用户名
        password: "",  // 密码
        userId: ""
    }
    // Axios
}
// 点击登录按钮
const loginUp = () => {
    loginUpHidden.value = true
    list.value = {// 注册/登录信息
        userName: "", // 用户名
        password: "",  // 密码
        userId: ""
    }
}

// 点击开始游戏
const StartGame = () => {
    GameDateils.value = true
    let index = 1
    MainGameTile.value = GameTile.value.charAt(0)
    timerTile.value == null ? "" : clearInterval(timerTile.value)
    timerTile.value = setInterval(() => {
        nextTick(async () => {
            MainGameTile.value += GameTile.value.charAt(index)
            index++
            if (GameTile.value.length == index) {
                clearInterval(timerTile.value)
                setTimeout(async () => {
                    Loging.value = true
                    const res = await Main.DelectCHARACTERS()
                    if (res) {
                        Alert({
                            time: 1000, // 每个组件小时时间 默认值1s
                            title: "创建角色成功",   // 渲染的内容，
                            type: "success"  //组件类型
                        })
                        router.push({
                            name: "GameIndex"
                        })
                        GameDateils.value = false
                        Loging.value = false
                    } else {
                        Alert({
                            time: 1000, // 每个组件小时时间 默认值1s
                            title: "创建角色失败",   // 渲染的内容，
                            type: "error"  //组件类型
                        })
                        GameDateils.value = false
                        Loging.value = false
                    }
                }, 1000)
            }
        })
    }, 200)
}

// 更新日志弹窗确定按钮
const ConfirmDateils = () => {
    HtmlDateils.value = !HtmlDateils.value
    Main.MP3 = !Main.MP3
}
//打开详情
const HtmlDetails = () => {
    HtmlDateils.value = !HtmlDateils.value
}

// 控制音乐播放
// const mp3Fn = () => {
//     const music = GetMusic()
//     if (music == "play") {
//         audio.value.play()
//     } else if (music == "close") {
//         audio.value.pause();
//     }

// }
</script>

<style lang="scss" scoped>
.GameImg {
    img {
        cursor: pointer;
    }
}

.SettingBox {
    text-align: center;

    p {

        background: linear-gradient(to right, #fa3003, #11ff00);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        cursor: pointer;
    }
}

.Index {
    width: 100%;
    height: 100%;

    h1 {
        margin-top: 30px;
        text-align: center;

    }

    h4 {
        text-align: center;
        position: relative;

        sup {
            display: inline-block;
            font-size: 12px;
            border-radius: 50%;
            border: 1px solid #fff;
            width: 15px;
            height: 15px;
            line-height: 15px;
            cursor: pointer;

        }
    }

    .Content {
        width: 100%;
        text-align: center;


    }

    .One {
        img {
            width: 100%;
            height: 100%;
        }
    }

    .GameDateilsHidden {
        min-height: 100px;
        text-indent: 2em;
        letter-spacing: 2px;
    }

    .LoginUp {
        margin-top: 10%;
        text-align: center;
        margin-bottom: 10px;

        input {
            width: 50%;
            height: 30px;
            padding: 0 10px;
            outline: none;

        }
    }
}
</style>